<template>
  <div>
    <litter-header title="歌单详情"></litter-header>

    <!-- 顶部简介区 -->
    <div class="introduce">
      <img
        class="left"
        :src="recommendSong.picUrl"
        style="width: 170%; height: 250%"
      />
      <van-col span="8" class="center">
        <img
          class="msgImg"
          :src="recommendSong.picUrl"
          :title="recommendSong.copywriter"
        />
        <div class="listen">
          <van-icon name="service-o" />
          <span>{{ (recommendSong.playCount / 10000).toFixed(1) + "万" }}</span>
        </div>
      </van-col>
      <div class="right">
        <p class="msgTitle">{{ recommendSong.name }}</p>
      </div>
    </div>
    <!-- 歌单列表 -->
    <h4 class="titlename">歌曲列表</h4>
    <div class="lists">
      <div class="list" v-for="(item, index) in songList" :key="index">
        <div class="number">{{ index + 1 }}</div>
        <van-cell-group>
          <van-cell
            :title="item.al.name"
            class="哪里都是你"
            label="队长-哪里都是你"
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="play" class="play-icon" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="lookmore">查看更多歌曲，请下载客户端</div>
    </div>

    <!-- 评论页 -->
    <h4 class="titlename">精彩评论</h4>
    <div class="commit" v-for="item in 3" :key="item">
      <div class="user">
        <img src="../../assets/logo.png" alt="" />
      </div>
      <div class="right">
        <van-cell-group>
          <van-cell title="单字一个森-" label="2020年12月10日" style="color:#666666">
          <template #right-icon>
            <van-icon name="thumb-circle-o" class="thumb-circle-o" />
            <p class="agreenum">520</p>
          </template>
          </van-cell>
        </van-cell-group>
        <p>
          我现在的状态就是 微信没有消息 游戏也打腻了 每天看着短视频
          时而被文案触动 时而被视频戳心 生活也很迷茫💙
        </p>
      </div>
    </div>

    <h4 class="titlename">最新评论({{'29'}})</h4>
    <div class="commit" v-for="item in 3" :key="item+3">
      <div class="user">
        <img src="../../assets/logo.png" alt="" />
      </div>
      <div class="right">
        <van-cell-group>
          <van-cell title="单字一个森-" label="2020年12月10日" style="color:#666666">
          <template #right-icon>
            <van-icon name="thumb-circle-o" class="thumb-circle-o" />
            
          </template>
          </van-cell>
        </van-cell-group>
        <p>
          我现在的状态就是 微信没有消息 游戏也打腻了 每天看着短视频
          时而被文案触动 时而被视频戳心 生活也很迷茫💙
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      recommendSong: {}, //推荐歌单展示
    };
  },
  computed: {
    ...mapState({
      songList: (state) => state.Home.recommendSongsDetail,
    }),
  },
  mounted() {
    this.recommendSong = JSON.parse(sessionStorage.getItem("recommendSong"));
    this.$store.dispatch("getRecommendSongsDetail", this.recommendSong.id);
    this.$store.dispatch("getRecommendSongsCommit", this.recommendSong.id);
  },
};
</script>

<style scoped lang="less">
.list {
  display: flex;
  box-sizing: border-box;
}
.title {
  padding: 0.2666667rem 0.24rem;
  margin: 0.1rem 0rem 0.1rem 0;
  background-color: #eee;
  color: #333;
  font-size: 0.4rem;
  border-left: 3px solid red;
}
.van-col {
  text-align: center;
  margin: 0.1667rem 0px;
  position: relative;
}
.msgImg {
  width: 100%;
  height: auto;
}
.msgTitle {
  display: inline-block;
  height: 2.5em;
  color: #fefefe;
  font-size: 0.4533rem;
  padding: 0.05rem 0.5em 0 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  text-align: center;
  margin: 0.5333rem 5px 0px;
}
.listen {
  background-color: rgb(26, 24, 24);
  z-index: 10;
  position: absolute;
  right: 0.1666667rem;
  top: 0.1667rem;
  font-size: 0.2667rem;
  color: #fff;
}
.introduce {
  height: 4.5rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0.2667rem;
  box-sizing: border-box;
  & > img {
    position: absolute;
    z-index: -1;
    transform: translate(-25%, -25%);
    filter: blur(25px);
  }
}

.commit {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: .2133rem 0rem;
  .user {
    padding: 0.2667rem;
    width: 0.9333rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border: 1px solid rebeccapurple;
      border-radius: 0.4rem;
      overflow: hidden;
    }
  }
  .right {
    box-sizing: border-box;
    font-size: 0.3733rem;
    width: 9.7333rem;
    .van-cell-group {
      height: 1.4667rem;
      width: 323px;
      position: relative;
      .thumb-circle-o{
        position: absolute;
        font-size: .6667rem;
        text-align: center;
        line-height: .5333rem;
        top: 50%;
        right: .32rem;
      }
      .agreenum{
        position: absolute;
        top: 50%;
        right: 1rem;
      }
    }
    p{
      padding-right: .1333rem;
    }
  }
}

.titlename {
  height: 0.6133rem;
  font-size: 0.32rem;
  color: #666;
  background-color: #0000000d;
  line-height: 0.6133rem;
  padding: 0px 0.2667rem;
}
.number {
  color: gray;
  text-align: center;
  line-height: 1.76rem;
  width: 40px;
  font-size: 0.4533rem;
}
.van-cell-group {
  flex: 1;
  position: relative;
}
.van-cell {
  padding: 0.0533rem 0rem !important;
}
.van-cell span {
  display: inline-block;
  width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
}
.play-icon {
  position: absolute;
  top: 50%;
  right: 0.2667rem;
  transform: translate(0px, -50%);
  font-size: 0.5867rem;
  color: rgb(175, 175, 175);
  border: 1px solid rgb(173, 173, 173);
  border-radius: 0.6667rem;
}
.lookmore {
  text-align: center;
  font-size: 0.3733rem;
  color: #999;
  margin-top: 0.2667rem;
}
.footer {
  height: 1.4667rem;
  color: #99999999;
  font-size: 0.3733rem;
  text-align: center;
  line-height: 1.4667rem;
}
</style>